<template>
<div class="wrapper">
	
	<!-- header部分 -->
	<header>
		<p>商家列表</p>
	</header>
	
	<!-- 商家列表部分 -->
	<ul class="business">
		<li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
			<div class="business-img">
				<img :src="item.businessImg">
				<div class="business-img-quantity" v-show="item.quantity>0">{{item.quantity}}</div>
			</div>
			<div class="business-info">
				<h3>{{item.businessName}}</h3>
				<p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
				<p>{{item.businessExplain}}</p>
			</div>
		</li>
	</ul>
	
	<!-- 底部菜单部分 -->
	<Footer></Footer>
	
</div>	
	
</template>

<script>
import Footer from '../components/Footer.vue'
export default{
	name:'BusinessList',
	data(){
		return{
			orderTypeId:this.$route.query.orderTypeId, //接受前页面参数
			businessArr:[],
			user:{}
			
		}
	},
	components:{
		Footer
	},
	created() { 
		//获取当前登陆的用户对象
		this.user = this.$getSessionStorage('user');
		
		//根据orderTypeId查询商家信息 ,发送axios请求到springboot
		this.$axios.post('BusinessController/listBusinessByOrderTypeId',
		this.$qs.stringify({orderTypeId:this.orderTypeId}))
		.then(response=>{
			this.businessArr=response.data; //将后台得到的数据绑定在vue的businessArr属性上
			console.log(response.data);
			//判断是否登陆
			if(this.user !=null){
				this.listCart(); //调用自定义方法,获取购物车中的数量
			}
		})
		.catch(error=>{
			console.log(error)
		})
	},
	methods:{
		listCart(){
			this.$axios.post('CartController/listCart',this.$qs.stringify({userId:this.user.userId}))
			.then(response=>{
				var cartArr = response.data;
				//遍历食品列表
				for(var businessItem of this.businessArr){
					businessItem.quantity = 0 ;//创建一个属性,存放每个商家购物车商品数量
					for(var  cartItem of cartArr){
						if(cartItem.businessId == businessItem.businessId){
							businessItem.quantity += cartItem.quantity;
							//console.log(businessItem.businessId+':'+businessItem.quantity)
						}
					}
				}
				this.businessArr.sort();
			})
			.catch(err=>{
				
			})
		},
		toBusinessInfo(businessId){
			this.$router.push({path:'/businessInfo',query:{businessId:businessId}})
		}
	}
	
	
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper{
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header{
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 商家列表部分 ******************/
.wrapper .business{
	width: 100%;
	margin-top: 12vw;/*使用上外边距避开header部分*/
	margin-bottom: 14vw;
}
.wrapper .business li{
	width: 100%;
	box-sizing: border-box;
	padding: 2.5vw;
	border-bottom: solid 1px #DDD;
	user-select: none;
	cursor: pointer;
	
	display: flex;
	align-items: center;
}
.wrapper .business li .business-img{
	/*这里设置为相当定位，成为business-img-quantity元素的父元素*/
	position: relative;
}
.wrapper .business li .business-img img{
	width: 20vw;
	height: 20vw;
}
.wrapper .business li .business-img .business-img-quantity{
	width: 5vw;
	height: 5vw;
	background-color: red;
	color: #fff;
	font-size: 3.6vw;
	border-radius: 2.5vw;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	/*设置成绝对定位，不占文档流空间*/
	position: absolute;
	right: -1.5vw;
	top: -1.5vw;
}
.wrapper .business li .business-info{
	margin-left: 3vw;
}
.wrapper .business li .business-info h3{
	font-size: 3.8vw;
	color: #555;
}
.wrapper .business li .business-info p{
	font-size: 3vw;
	color: #888;
	margin-top: 2vw;
}	
</style>
